<template>
  <div>
    <el-table :data="books" stripe>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="书名"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="copies" label="数量"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteBook(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="showAddDialog = true">添加图书</el-button>
    <el-dialog title="添加图书" :visible.sync="showAddDialog">
      <el-form ref="addForm" :model="newBook" label-position="left" label-width="80px">
        <el-form-item label="书名" prop="title">
          <el-input v-model="newBook.title"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="newBook.author"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="copies">
          <el-input v-model.number="newBook.copies"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="addBook">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { id: 1, title: 'Python编程', author: 'John Doe', copies: 4 },
        { id: 2, title: '历史的秘密', author: 'Jane Smith', copies: 3 },
        { id: 3, title: '宇宙探索', author: 'Emily Brown', copies: 2 },
        { id: 4, title: '健康生活', author: 'Mike Johnson', copies: 5 },
        { id: 5, title: '数学之美', author: 'Sarah Lee', copies: 4 },
        { id: 6, title: '艺术欣赏', author: 'David White', copies: 3 },
        { id: 7, title: '编程入门', author: 'Alice Green', copies: 2 },
        { id: 8, title: '科幻世界', author: 'Frank Black', copies: 5 },
        { id: 9, title: '自然奇观', author: 'Grace Blue', copies: 4 },
        { id: 10, title: '音乐之声', author: 'Tom Red', copies: 3 }
      ],
      showAddDialog: false,
      newBook: {
        title: '',
        author: '',
        copies: 0
      }
    }
  },
  methods: {
    addBook() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          const newId = Math.max(...this.books.map(book => book.id)) + 1
          this.newBook.id = newId
          this.books.push({...this.newBook})
          this.showAddDialog = false
          this.newBook = {
            title: '',
            author: '',
            copies: 0
          }
        }
      })
    },
    deleteBook(id) {
      this.books = this.books.filter(book => book.id !== id)
    }
  }
}
</script>    